<template>
  <div>
    <div id="uppy" ref="uppy" class="custom-uppy-container" />
  </div>
</template>

<script>
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import XHRUpload from '@uppy/xhr-upload'
import zh_CN from '@uppy/locales/lib/zh_CN' // 导入中文语言包
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
import '@uppy/webcam/dist/style.css'

import file_manage from '@/views/project/container/containerDetail/components/FileManagement.vue'
export default {
  mounted() {
    // 创建 Uppy 实例
    const uppy = new Uppy({
      debug: true, // 开启调试模式
      autoProceed: false, // 禁止自动上传
      locale: zh_CN // 设置 Uppy 的语言为中文
    })

    uppy.use(Dashboard, {
      inline: true,
      target: this.$refs.uppy,
      width: 1000,
      height: 320
    })

    uppy.on('file-added', (file) => {
      uppy.setFileMeta(file.id, {
        id: this.$route.params.id
      })
    })

    // 添加 XHRUpload 插件，用于上传文件
    uppy.use(XHRUpload, {
      endpoint: '/project/uploadFiles', // 你的上传URL
      // endpoint: '/project/saveFiles', // 你的上传URL
      fieldName: 'files', // 上传字段的名称
      allowedMetaFields: ['id']
    })

    // 监听上传完成事件
    uppy.on('complete', (result) => {
      console.log('上传完成', result.successful)
      // this.$refs.file_manage.fetchData();
      // location.reload()
      this.fileList = []
      this.$refs.upload.clearFiles()
      this.fetchData()
      // 可以在这里处理上传完成后的逻辑
    })
  }
}
</script>
